<script setup>
import { reactive, ref } from 'vue'
import request from "../utils/request.js";
import {userStore} from "../stores/user.js";
import {ElMessage} from "element-plus";
import {useRouter} from 'vue-router'
const router = useRouter()
const store = userStore()
const ruleForm = reactive ({
  accountName: '',
  password:''
})
const login = ()=>{
  if (!ruleForm.accountName){
    ElMessage.error('用户名为空')
    return
  }
  if (!ruleForm.password){
    ElMessage.error('密码为空')
    return
  }
  request.post('/login',ruleForm)
  .then(response=>{
    console.log(response)
    store.setToken(response.data)
    router.push('/home')
  }).catch(err=>{
    alert('用户名或密码错误')
  })
}

</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="login-title">用户管理系统</h2>
      <el-form
          ref="ruleFormRef"
          class="login-form"
          :model="ruleForm"
          label-width="auto"
      >
        <el-form-item label="用户名" prop="accountName">
          <el-input v-model="ruleForm.accountName"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" show-password/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()" class="login-btn">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #e0f7fa 0%, #b3e5fc 100%);
}

.login-box {
  width: 400px;
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.2);
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
  color: #1976d2;
}

.login-form {
  margin-top: 20px;
}

.login-btn {
  width: 100%;
  background-color: #1976d2;
  border-color: #1976d2;
}

.login-btn:hover {
  background-color: #1565c0;
  border-color: #1565c0;
}

:deep(.el-form-item__label) {
  color: #1976d2;
}
</style>
